<template>
	<div id="chatbase-bubble-button"
			 style="position: fixed; bottom: 1rem; right: 1rem; width: 50px; height: 50px; border-radius: 25px; background-color: rgb(0, 0, 0);
			 box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px;
			 cursor: pointer; z-index: 999999998; transition: all 0.2s ease-in-out 0s; left: unset; transform: scale(1);">
		<div style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; z-index: 999999999;">
		<img src="https://backend.chatbase.co/storage/v1/object/public/chat-icons/4a84dc98-32e3-4cf7-9aaf-9df171bd7f8a/chatbase--1--pdf-p680fxvnm.svg"
																																																																																																																																																																																																																																 style="width: 50px; height: 50px; border-radius: 25px;"></div></div>
<!--	<div style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; z-index: 999999999;"><img src="https://backend.chatbase.co/storage/v1/object/public/chat-icons/4a84dc98-32e3-4cf7-9aaf-9df171bd7f8a/chatbase&#45;&#45;1&#45;&#45;pdf-p680fxvnm.svg" style="width: 50px; height: 50px; border-radius: 25px;"></div>-->
	<!--    全屏容器    -->
	<div ref="pageDiv"
			 :class="{'zlevelTop':mouseDownState}"
			 style="position: absolute;top: 0;height: 100%;width: 100%">
		<!--  点击蒙版  -->
		<div v-if="menuOpen"  @click.stop="closeOpenModal"
				 style="position: fixed;top: 0;right: 0;width: 100%;height: 100%;z-index: 998"></div>
		<!--  多功能菜单 -->
		<div :class="{'six-more-modal-btn':menuOpen,'moreModal':!menuOpen,'more-tran-animate':!mouseDownState}"
				 ref="actionMgr" :style="position"  @mousedown="demo_down">
			<!--  触发器 -->
			<div v-if="!menuOpen" @click="demo_click" class="imgMore">
				<span>多功能菜单</span>
			</div>
			<!--  菜单  -->
			<div v-else></div>
		</div>
	</div>
</template>

<script>
    export default {
        name: "homeDragbtn",
        props: {
            // 通过position来设置初始定位
            position: {
                type: Object,
                default: function() {
                    return {
                        top: "32.25rem",
                        right: "0"
                    }
                }
            }
        },
        data() {
            return {
                menuOpen:false,     //  菜单展开状态
                mouseDownState:false,   //  鼠标点击状态
                iX:0, iY:0,
                dX:0, dY:500,   //  初始定位
                lastMoveIndex:0,    //  拖拽计数
                curMoveIndex:0, //  历史计数
            }
        },
        methods: {
            //  鼠标按下
            demo_down(event){
                //  如果打开了菜单，则不做响应
                if(this.menuOpen){
                    this.mouseDownState = false;
                    return
                }
                console.log("demo_down",event);
                /* 此处判断  pc 或 移动端 得到 event 事件 */
                var touch;
                if (event.touches) {
                    touch = event.touches[0];
                } else {
                    touch = event;
                }
                // 鼠标点击 面向页面 的 x坐标 y坐标
                let { clientX, clientY } = touch;
                // 鼠标x坐标 - 拖拽按钮x坐标  得到鼠标 距离 拖拽按钮 的间距
                this.iX = clientX - this.$refs.actionMgr.offsetLeft;
                // 鼠标y坐标 - 拖拽按钮y坐标  得到鼠标 距离 拖拽按钮 的间距
                this.iY = clientY - this.$refs.actionMgr.offsetTop;
                // 设置当前 状态为 鼠标按下
                this.mouseDownState = true;
            },
            //  鼠标拖拽
            demo_move(event){
                //鼠标按下 切移动中
                if (this.mouseDownState) {
                    console.log("demo_move",event);
                    /* 此处判断  pc 或 移动端 得到 event 事件 */
                    var touch;
                    if (event.touches) {
                        touch = event.touches[0];
                    } else {
                        touch = event;
                    }
                    // 鼠标移动时 面向页面 的 x坐标 y坐标
                    let { clientX, clientY } = touch;
                    //当前页面全局容器 dom 元素  获取容器 宽高
                    let {
                        clientHeight: pageDivY,
                        clientWidth: pageDivX
                    } = this.$refs.pageDiv;
                    /* 鼠标坐标 - 鼠标与拖拽按钮的 间距坐标  得到 拖拽按钮的 左上角 x轴y轴坐标 */
                    let [x, y] = [clientX - this.iX, clientY - this.iY];

                    //拖拽按钮 dom 元素  获取 宽高 style 对象
                    let {
                        clientHeight: actionMgrY,
                        clientWidth: actionMgrX,
                        style: actionMgrStyle
                    } = this.$refs.actionMgr;
                    /* 此处判断 拖拽按钮 如果超出 屏幕宽高 或者 小于
											 设置 屏幕最大 x=全局容器x y=全局容器y 否则 设置 为 x=0 y=0
										*/
                    if (x > pageDivX - actionMgrX) x = pageDivX - actionMgrX;
                    else if (x < 0) x = 0;
                    if (y > pageDivY - actionMgrY) y = pageDivY - actionMgrY;
                    else if (y < 0) y = 0;
                    this.dX =x;this.dY = y;
                    // 计算后坐标  设置 按钮位置
                    actionMgrStyle.left = `${x}px`;
                    actionMgrStyle.top = `${y}px`;
                    actionMgrStyle.bottom = "auto";
                    actionMgrStyle.right = "auto";
                    //  move Index
                    this.lastMoveIndex++;
                    //  当按下键滑动时， 阻止屏幕滑动事件
                    event.preventDefault();
                }
            },
            //    单击事件
            demo_click(){
                //  mouseup 后会激活click事件
                //  点击事件
                this.menuOpen = !this.menuOpen;
                if( this.menuOpen ){
                    //  打开菜单
										alert("打开菜单")
                }
            },
            //    点击空白关闭菜单
            closeOpenModal(){}
        }
    }
</script>

<style scoped>
	.zlevelTop{
		z-index: 9999;
	}
	.more-tran-animate{
		transition:0.5s;
	}
	.moreModal {
		/* 如果碰到滑动问题，1.3 请检查 z-index。z-index需比web大一级*/
		z-index: 9999;
		position: fixed;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background-color: #337AB7;
		line-height: 40px;
		text-align: center;
		color: #fff;
		opacity: 0.6;
	}
	.moreModal:hover{
		opacity: 1;
	}
	.six-more-modal-btn{
		position: fixed;
		z-index: 9999;
		width: 14rem;
		height: 14rem;
		border-radius: 5px;
		background: #1A1A1A;
		color: #fff;
	}
	.imgMore{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

</style>
